<div [ngClass]="{'property-editor': true, editing: state === State.Write}" (click)="onClick($event)">
  <span [ngSwitch]="state" class="state-container">
    <span *ngSwitchCase="State.Read">
      <span class="editable">
        <span *ngIf="isUndefined()">undefined</span>
        <span *ngIf="isNull()">null</span>
        <span *ngIf="isEmptyString()">&quot;&quot;</span>
        <span *ngIf="isRenderable()">{{value}}</span>
      </span>
    </span>
    <span *ngSwitchDefault>
      <input type="text"
        [ngClass]="{
          editable: true,
          invalid: state === State.Unparseable
        }"
        [(ngModel)]="value"
        (keypress)="onKeypress($event)"
        (blur)="onBlur($event)" />
    </span>
  </span>
</div>